<template>
    <div class="content">
      <div class="title">
        <p>{{$t('message.global.configList')}}</p>
      </div>
      <div class="header">
        <div class="tools">
            <el-form :inline="true" :model="form" class="demo-form-inline">
              <el-form-item :label="$t('message.global.group') + ':'">
                <el-input v-model="form.group" :placeholder="$t('message.global.group')"></el-input>
              </el-form-item>

              <el-form-item :label="$t('message.global.unit') + ':'">
                <el-input v-model="form.unit" :placeholder="$t('message.global.unit')"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="loadData" icon="el-icon-search">{{$t('message.global.search')}}</el-button>
              </el-form-item>
            </el-form>
          <div>
            <el-button type="success" @click="addDialogVisiable = true" icon="el-icon-circle-plus-outline">{{$t("message.global.add")}}</el-button>
          </div>
        </div>
      </div>

      <div class="body">
        <div>
          <el-card class="box-card">
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="group"
                :label="$t('message.global.group')">
              </el-table-column>
              <el-table-column
                prop="unit"
                :label="$t('message.global.unit')">
              </el-table-column>

              <el-table-column
                prop="description"
                :label="$t('message.global.description')">
              </el-table-column>


              <el-table-column
                prop="createTime"
                :label="$t('message.global.createTime')">
              </el-table-column>

              <el-table-column
                prop="updateTime"
                :label="$t('message.global.updateTime')">
              </el-table-column>

              <el-table-column :label="$t('message.global.operation')" :width="380">
                <template slot-scope="scope">
                  <!--<el-button
                    class="btn-modify" size="mini" icon="el-icon-edit-outline">{{$t('message.global.modify')}}</el-button>-->

<!--                  <el-button
                    type="warning" size="mini" icon="el-icon-remove-outline">{{$t('message.global.disable')}}</el-button>-->
                  <el-button
                    size="mini"
                    type="danger" @click="deleteConfig(scope.row)" icon="el-icon-delete">{{$t('message.global.delete')}}</el-button>
                </template>
              </el-table-column>

              <el-table-column :label="$t('message.config.showVersion')">
                <template slot-scope="scope">
                  <el-button
                    type="primary" size="mini" @click="showVersion(scope.row)" icon="el-icon-more-outline">{{$t('message.global.version')}}</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-card>
        </div>

        <div class="page-util">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="index"
            :page-sizes="[10, 15, 20, 30]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </div>
      </div>

      <el-dialog :title="$t('message.config.addUnit')" :visible.sync="addDialogVisiable" width="400px" v-loading="addLoading">
        <add-unit-form ref="addForm" v-if="addDialogVisiable" @commitOver="commitOver" @commitSuccess="commitSuccess"></add-unit-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisiable = false">{{$t('message.global.cancel')}}</el-button>
          <el-button type="primary" @click="submitUnit">{{$t('message.global.ok')}}</el-button>
        </div>
      </el-dialog>

    </div>
</template>

<script>
    import AddUnitForm from "../component/AddUnitForm.vue";

    export default {
      components: {AddUnitForm},
      name: "config-list",
        data : function(){
          return {
            form : {
              group : "",
              unit : ""
            },
            tableData : [],
            size : 10,
            index : 1,
            total : 0,
            addDialogVisiable : false, //new dialog is visiable
            addLoading : false, //request add unit loading
          }
        },
        methods : {
          loadData : function(){
            this.form["index"] = this.index;
            this.form["size"] = this.size;
            this.$get("/config/listUnit",this.form).then(data => (this.tableData = data.data,this.total=data.count));
          },
          submitUnit : function () {
            this.addLoading = true;
            this.$refs['addForm'].commit();
          },
          handleSizeChange(value){
            this.size = value;
            this.index = 1;
            this.loadData();
          },
          handleCurrentChange(value){
            this.index = value;
          },
          showVersion(row){
            var id = row.id;
            var group = row.group;
            var unit = row.unit;
            this.$router.push("/configVersionList?group=" + group + "&unit=" + unit + "&unitId=" + id)
          },
          commitOver(){
            this.addLoading = false;
          },
          commitSuccess(){
            //close dialog and refresh data
            this.addDialogVisiable = false;
            if(this.index == 1){
              this.loadData();
            }else{
              this.index = 1;
            }

          },
          deleteConfig(row){
            this.$confirm(this.$t('message.config.confirmDelete'), this.$t('message.global.prompt'), {
              confirmButtonText: this.$t('message.global.ok'),
              cancelButtonText: this.$t('message.global.cancel'),
              type: 'warning'
            }).then(() => {

              this.$get("/config/deleteUnitConfig?id=" + row.id).then(data => {
                if(data == 0){
                  //success
                  this.loadData();
                  this.$message.success(this.$t('message.config.deleteSuccess'))
                }else if(data == 1){
                  //has version config
                  this.$message.warning(this.$t('message.config.deleteUnitConfigFail'))
                }else{
                  alert('not defiend code:' + data)
                }
              })


            }).catch(() => {
                //cancel
            });


          }
        },
        watch : {
          index : function () {
            this.loadData();
          }
        },
        mounted : function(){
          this.loadData();
        }
    }
</script>

<style scoped>
  .title p{text-align: center;font-size: 20px;}
  .title{margin-bottom: 1rem;}
  .content{width:80%;margin:0 auto;}
  .header{margin-bottom: 2rem;}
  .tools{background-color: #f5f7fa;padding:10px 20px 10px 20px;border:1px solid #bbb1b1;border-radius:5px;display: flex;justify-content: space-between;}
  .el-form-item{margin-bottom: 0;}
  .page-util{margin:1rem;display: flex;flex-direction: row-reverse;}
  .btn-modify{background-color: #61afa8;border-color: #61afa8;color:#fff;}
</style>
